<template>
  <tiny-row class="first-row" :flex="true">
    <tiny-col>
      <div class="nav">
        <img src="../../public/vite.svg" alt="封面" height="100" width="100">
        <span class="title">{{columnInfo.name}}</span>
        <span class="access-number">访问：
          <span v-if="columnInfo.accessNumber" class="number">
          {{columnInfo.accessNumber}}
          </span>
          <span v-else class="number">0</span>
        </span>
        <span class="post-number">帖子：<span class="number">{{columnInfo.commentNumber}}</span></span>
      </div>
    </tiny-col>
  </tiny-row>
  <tiny-row class="second-row" :flex="true">
    <tiny-col>
      <div class="header">
        <span>看吧</span>
        <tiny-search
            clearable
            v-model="searchPost"
            placeholder="吧内搜索"
            style="width:230px;"
            @search="handleSearchPost"
        >
        </tiny-search>
      </div>
      <div class="post-list">
        <div class="post"
             v-for="(post,index) in postList"
             :key="post.id"
             @click="toPostDetail(post.id)"
        >
          <tiny-tag>{{index + 1}}</tiny-tag>
          <div class="detail">
            <span>{{post.title}}</span>
            <img :src="post.coverImage" height="100" width="100" alt="封面">
          </div>
        </div>
      </div>
    </tiny-col>
  </tiny-row>
  <tiny-row class="third-row" :flex="true">
    <tiny-col>
      <div class="page">
        <tiny-pager
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="pageNum"
            :page-size="pageSize"
            :total="pageTotal"
            :page-sizes="[5, 10, 20, 40]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @prev-click="prevClick"
            @next-click="nextClick"
        >
        </tiny-pager>
      </div>
    </tiny-col>
  </tiny-row>
</template>

<script setup>
import {useRoute,useRouter} from "vue-router";
import {useHeaderSearchStore} from "../store/useHeaderSearchStore.js";
import {
  Row as TinyRow,
  Col as TinyCol,
  Search as TinySearch,
  Tag as TinyTag,
  Pager as TinyPager, Modal,
} from '@opentiny/vue'
import {ref} from 'vue'
import {dayjs, usePage} from 'undraw-ui'
import request from "../utils/request.js";



const store = useHeaderSearchStore()
const {updateExistFlag} = {...store}
updateExistFlag() // 隐藏搜索框
const route = useRoute()
const router = useRouter()
const columnId = route.params.columnId
const searchPost = ref('')
const postList = ref([])
const pageNum = ref(1)
const pageSize = ref(15)
const pageTotal = ref(0)
const postParam = ref({
  title:searchPost.value,
  specialColumnId:columnId,
  pageParam:{
    pageNum:pageNum.value,
    pageSize:pageSize.value
  }
})
const columnInfo = ref({})


// 处理帖子搜索
const handleSearchPost = () => {
  postParam.value.title = searchPost.value
  queryPostList()
}

// 跳转帖子详细页
const toPostDetail = (postId) => {
  const {href} = router.resolve(`/post/detail/${postId}`)
  window.open(href,'_blank')
}

// 往后翻页
const nextClick = () => {
  pageNum.value++
  queryPostList()
}

// 往前翻页
const prevClick = () => {
  pageNum.value--
  queryPostList()
}

// 改变当前页
const handleCurrentChange = (val) => {
  pageNum.value = val
  queryPostList()
}

// 改变分页大小
const handleSizeChange = (val) => {
  pageSize.value = val
  queryPostList()
}

// 查询专栏信息
const queryColumn = () => {
  request.get(`/api/contents/posts/special-column/${columnId}`).then(res => {
    if (res.code === 1){
      columnInfo.value = res.data
      document.title = columnInfo.value.name
    }else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
queryColumn()

// 根据专栏id查询帖子列表
const queryPostList = () => {
  request.post('/api/contents/posts/page',postParam.value).then(res => {
    if (res.code === 1){
      postList.value = res.data.records
      pageTotal.value = res.data.total
    }else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
queryPostList()


</script>

<style lang="less" scoped>
.third-row{
  .page{
    margin:10px 0;
  }
  margin-left:80px;
}

.second-row{
  .post-list{
    .post{
      .detail{
        margin-left:25px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      display:flex;
      margin:10px 0 40px 20px;
      cursor:pointer;
    }
    border: 1px solid #ddd;
  }
  .header{
    span:first-child{
      font-size:18px;
    }
    height:25px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #eceff2;
  }
  width:80%;
  margin-left:80px;
}

.first-row{
  .nav{
    .title{
      font-size:22px;
      font-weight:bold;
    }
    .title,.access-number,.post-number{
      .number{
        color:#ff7f3e;
      }
      margin-left:20px;
    }
    display:flex;
    align-items:center;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #f3f5f8;
  }
  width:80%;
  margin-left:80px;
}

</style>
